<template>
    <div id="nav-bar-item" @click="itemClick">
      <slot  name="img"></slot>
      <slot v-if="!active" name="text"></slot>
      <slot v-else name="text_active"></slot>
    </div>
</template>

<script>
    export default {
        name: "navBarItem",
        props: ['path'],
        data(){
          return{
            path: this.path,
          }
        },
        computed:{
          active(){
            return this.$route.path.indexOf(this.path) !== -1
          }
        },
        methods: {
          itemClick(){
            this.$router.push(this.path)
          }
        }
    }
</script>

<style scoped>
  #nav-bar-item{
    flex: 1;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>
